import { useState, useRef, useEffect } from 'react';

// 防抖函数：延迟 delay 后执行，若期间再次调用则重新计时
const debounce = (fn, delay) => {
  let timer = null;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
};

// 节流函数：单位时间内最多执行一次
const throttle = (fn, interval) => {
  let lastTime = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastTime >= interval) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
};

const SearchBox = () => {
  const [value, setValue] = useState('');
  const [loading, setLoading] = useState(false);
  const [results, setResults] = useState([]);
  const abortControllerRef = useRef(null); // 用于取消请求

  // 搜索请求函数
  const fetchSearch = async (keyword) => {
    if (!keyword.trim()) {
      setResults([]);
      return;
    }

    // 取消上一次未完成的请求（解决请求冲突）
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
    }

    const controller = new AbortController();
    abortControllerRef.current = controller;

    try {
      setLoading(true);
      const response = await fetch(`/api/search?keyword=${encodeURIComponent(keyword)}`, {
        signal: controller.signal, // 关联取消信号
      });

      if (!response.ok) throw new Error('请求失败');
      const data = await response.json();
      setResults(data); // 仅更新最新请求的结果
    } catch (error) {
      if (error.name !== 'AbortError') {
        console.error('搜索失败:', error);
      }
    } finally {
      setLoading(false);
    }
  };

  // 防抖处理输入框变化（延迟 500ms 执行）
  const handleInputDebounced = useRef(
    debounce((val) => fetchSearch(val), 500)
  ).current;

  // 节流处理搜索按钮点击（1秒内最多一次）
  const handleSearchThrottled = useRef(
    throttle(() => fetchSearch(value), 1000)
  ).current;

  // 输入框变化时触发防抖搜索
  const handleInputChange = (e) => {
    const val = e.target.value;
    setValue(val);
    handleInputDebounced(val); // 防抖执行
  };

  // 组件卸载时取消请求
  useEffect(() => {
    return () => {
      if (abortControllerRef.current) {
        abortControllerRef.current.abort();
      }
    };
  }, []);

  return (
    <div className="search-container">
      <input
        type="text"
        value={value}
        onChange={handleInputChange}
        placeholder="输入关键词搜索..."
        disabled={loading}
      />
      <button onClick={handleSearchThrottled} disabled={loading}>
        {loading ? '搜索中...' : '搜索'}
      </button>

      {loading && <div className="loading">加载中...</div>}

      <div className="results">
        {results.length > 0 ? (
          results.map((item) => (
            <div key={item.id}>{item.name}</div>
          ))
        ) : (
          !loading && value && <div>无结果</div>
        )}
      </div>
    </div>
  );
};

export default SearchBox;